<template>
  <el-container class="tab-container">
    <!-- Tab headers -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick" stretch=true >
      <el-tab-pane label="我的书架" name="0"><BookShelf/></el-tab-pane>
      <el-tab-pane label="关注作者" name="1"><Fans/></el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import BookShelf from './BookShelf.vue';
import Fans from './fans.vue'

const activeTab = ref("0");

const handleTabClick = (tab) => {
  activeTab.value = tab.name;
};
</script>

<style scoped>
.tab-container {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 550px;
}

.el-tabs {
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 15px;
}

.el-tab-pane {
  padding: 3px;
  border-radius: 12px;
  background-color: white;
}
</style>